<template>
	<view>
		<view style="background-color: #85B5A8;">
			<view :style="{height: statusBarHeight+'px'}"></view>
			<view style="padding: 40rpx;"@click="topleftClick">
				<u-icon name="arrow-left"size="45"color="#ffffff"></u-icon>
			</view>
			<view style="padding: 40rpx;">
				<view class="u-flex" style="justify-content: space-between;">
					<u-avatar size="130" :src="$url+form.avatar"></u-avatar>
					<view style="background-color: #FFFFFF; padding: 20rpx 40rpx;border-radius: 2em;
					font-weight: bold;color: #D97341;" @click="show =true">
						编辑资料
					</view>
					<u-popup v-model="show" mode="bottom" height="90%"
					closeable border-radius="20" close-icon-pos="top-left">
						<view style="color: #C8C7CC;font-size: 36rpx;text-align: right;margin: 20rpx;">
							<text @click="updateClick">保存</text>
						</view>
						<h3 style="text-align: center;">编辑个人资料</h3>
						<view style="padding: 50rpx;margin-top: 80rpx;">
							<view class="u-flex" style="align-items: flex-end;">
								<u-avatar size="220" :src="$url+form.avatar"></u-avatar>
								<u-upload :action="$url+'/upload'"
								max-count="1"
								@on-success="successupload"
								:custom-btn="true"
								ref="upload">
									<view slot="addBtn">
										<image src="../../../static/weibiaoti1.png" mode="aspectFit"
										style="width: 80rpx;height: 80rpx;"></image>
									</view>
								</u-upload>
							</view>
							<u-form v-model="form"  label-width="200">
								<u-form-item label="昵称">
									<u-input placeholder="请输入昵称" v-model="form.userName"></u-input>
								</u-form-item>
								<u-form-item label="性别">
									<u-cell-group>
										<u-cell-item :title="form.sex==0?'女':'男'" @click="show2 = true"></u-cell-item>
									</u-cell-group>
									<u-picker mode="selector" v-model="show2" :range="sexs" @confirm="sexConfirm">
									</u-picker>
								</u-form-item>
								<u-form-item label="生日">
									<u-cell-group>
										<u-cell-item :title="form.beBorn | date" @click="show3 = true"></u-cell-item>
									</u-cell-group>
									<u-picker mode="time" v-model="show3" @confirm="beBornConfirm"
									>
									</u-picker>
								</u-form-item>
								<u-form-item label="签名">
									<u-input placeholder="介绍一下自己吧" v-model="form.signature"></u-input>
								</u-form-item>
							</u-form>
						</view>
					</u-popup>
				</view>
				<h3 style="margin-top: 30rpx;color: #F3F4F6;">{{form.userName}}</h3>
				<view style="color: #DCE1EC;margin-bottom: 30rpx;">
					<text>{{form.signature}}</text>
				</view>
				<view style="color: #DCE1EC;">
					<text>翻阅过{{ben}}本书</text>
				</view>
				<view style="justify-content: space-around;text-align: center;color: #F3F4F6;
				margin: 50rpx 0;" class="u-flex">
					<view @click="followClick(0)">
						<view>{{follow.length}}</view>
						<view>关注</view>
					</view>
					<view  @click="followClick(1)">
						<view>{{form.fans}}</view>
						<view>粉丝</view>
					</view>
					<view  @click="followClick(2)">
						<view>{{form.likes}}</view>
						<view>获赞</view>
					</view>
				</view>
			</view>
		</view>
		<view style="background-color: #F7F7F7;">
			<view style="padding: 40rpx;background-color: #FFFFFF;">
				<view style="justify-content: space-between;"class="u-flex">
					<view>
						<view style="position: relative;width: 80rpx;">
							<h3>书架</h3>
							<u-badge :offset="[-15,-15]" absolute 
							:count="bookshelfs.length"></u-badge>
						</view>
					</view>
					<view style="color: #929292;" @click="peopleClick">查看书架></view>
				</view>
				<view style="margin: 50rpx 0 0 0;justify-content: space-between;" class="u-flex">
					<view v-for="(item,index) in bookshelfs" v-if="index<3">
						<bookshelf-item :item="item"></bookshelf-item>
					</view>
				</view>
			</view>
			<view style="padding: 40rpx;background-color: #FFFFFF;margin-top: 15rpx;">
				<view class="u-flex" style="justify-content: space-between;">
					<view style="position: relative;">
						<view style="color: #000000;font-size: 36rpx;">我的评论</view>
						<u-badge :offset="[-15,-25]" absolute
						:count="commentUser.length"></u-badge>
					</view>
					
					<view style="color: #929292;" @click="messageClick">查看更多评论></view>
				</view>
				<view v-for="(item,index) in commentUser" :key="index" v-if="index<10">
					<message-pl :item="item"></message-pl>
				</view>
				
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				topList:[
					{id:1,name:"书架"},
					{id:2,name:"圈子"},
					{id:3,name:"历史"}
				],
				show2:false,
				show3:false,
				form:{},
				sexs:["女","男"],
				userId:0,
				bookshelfs:[],
				ben:0,
				follow:[],
				commentUser:[],
				statusBarHeight:0
			}
		},
		mounted() {
			let that = this
			//获取手机系统信息
			const info = uni.getSystemInfoSync()
			//设置状态栏高度
			that.statusBarHeight = info.statusBarHeight
			
		},
		methods: {
			topleftClick(){
				console.log("111")
				uni.switchTab({
					url:"../wod"
				})
			},
			sexConfirm(e){
				this.form.sex = e[0]
			},
			beBornConfirm(e){
				console.log(Date.now())
				this.form.beBorn = e.timestamp
				console.log(e.timestamp)
			},
			updateClick(){
				this.putUser(this.form)
			},
			
			async putUser(e){
				console.log(e)
				const res=await this.$myRequst({
					url:"/user/put",
					method:"PUT",
					data:e
				})
				console.log(res.data)
				if(res.data.code == 200){
					uni.showToast({
						title:"编辑成功",
						success: (res) => {
							this.show = false
						}
					})
				}
			},
			getUserId(){
				this.userId = uni.getStorageSync("userId")
				this.getUserData(this.userId)
			},
			async getUserData(id){
				const res=await this.$myRequst({
					url:"/user/get/"+id
				})
				this.form = res.data.data
				console.log(this.form)
			},
			peopleClick(){
				uni.switchTab({
					url:"../../shuj/shuj"
				})
			},
			//
			async getBookshelfs(){
				const res=await this.$myRequst({
					url:"/bookshelf/gets/"+uni.getStorageSync("userId")
				})
				this.bookshelfs = res.data.data
			},
			async getFollowAuthor(){
				const res=await this.$myRequst({
					url:"/follow/gets/author/"+uni.getStorageSync("userId")
				})
				this.follow = res.data.data
				console.log(this.follow)
			},
			followClick(e){
				uni.navigateTo({
					url:"../follow/follow?item="+e
				})
			},
			messageClick(){
				uni.navigateTo({
					url:"../message/message"
				})
			},
			async getCommentUser(){
				const res=await this.$myRequst({
					url:"/comment/gets/userId/"+uni.getStorageSync("userId")
				})
				console.log(res.data.data)
				this.commentUser = res.data.data
			},
			successupload(e){
				console.log(e)
				this.form.avatar = e
				this.$refs.upload.clear()
				uni.showToast({
					title:"长传成功"
				})
				
			}
		},
		onLoad() {
			this.getUserId()
			this.getBookshelfs()
			this.getFollowAuthor()
			this.getCommentUser()
			this.ben = uni.getStorageSync("bookItemArr").length
		}
	}
</script>

<style>

</style>
